<template>
  <a-drawer
    v-model:open="isShow"
    class="custom-class"
    title="编辑"
    size="large"
    placement="right"
    @after-open-change="afterOpenChange"
    @close="close"
  >
    <a-card>
      <a-form
        ref="form"
        :model="formState"
        autocomplete="off"
        style="padding: 25px"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="菜单类型">
          <a-radio-group
            v-model:value="formState.menuType"
            :disabled="isDetail"
          >
            <a-radio value="0">一级菜单</a-radio>
            <a-radio value="1">子菜单</a-radio>
            <a-radio value="2">按钮/权限</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="formState.menuType == 0 || formState.menuType == 1"
          label="菜单名称"
          name="name"
          :rules="[{ required: true, message: '请输入菜单名称!' }]"
        >
          <a-input v-model:value="formState.name" :readonly="isDetail" />
        </a-form-item>
        <a-form-item
          v-if="formState.menuType == 2"
          label="按钮/权限"
          name="name"
          :rules="[{ required: true, message: '请输入按钮/权限!' }]"
        >
          <a-input v-model:value="formState.name" :readonly="isDetail" />
        </a-form-item>
        <a-form-item
          label="上级菜单"
          v-if="formState.menuType == 1 || formState.menuType == 2"
          name="parentId"
          :rules="[{ required: true, message: '请输入上级菜单!' }]"
        >
          <a-tree-select
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
            :treeData="treeData"
            v-model:value="formState.parentId"
            placeholder="请选择父级菜单"
            :disabled="isDetail"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item
          v-if="formState.menuType == 0 || formState.menuType == 1"
          label="菜单路径"
          name="url"
          :rules="[{ required: true, message: '请输入菜单路径!' }]"
        >
          <a-input v-model:value="formState.url" :readonly="isDetail" />
        </a-form-item>
        <a-form-item v-if="formState.menuType == 2" label="菜单路径" name="url">
          <a-input v-model:value="formState.url" :readonly="isDetail" />
        </a-form-item>
        <a-form-item
          label="授权标识"
          name="perms"
          v-if="formState.menuType == 2"
        >
          <a-input v-model:value="formState.perms" :readonly="isDetail" />
        </a-form-item>
        <a-form-item
          v-if="formState.menuType == 0 || formState.menuType == 1"
          label="前端组件"
          name="component"
          :rules="[{ required: true, message: '请输入前端组件!' }]"
        >
          <a-input v-model:value="formState.component" :readonly="isDetail" />
        </a-form-item>
        <a-form-item
          v-if="formState.menuType == 0"
          label="默认跳转地址"
          name="redirect"
        >
          <a-input v-model:value="formState.redirect" :readonly="isDetail" />
        </a-form-item>
        <a-form-item
          v-if="formState.menuType == 0"
          label="上级路由"
          name="layout"
        >
          <a-input
            v-model:value="formState.layout"
            placeholder="不填默认为home"
            :readonly="isDetail"
          />
        </a-form-item>
        <a-form-item
          label="排序"
          name="sortNo"
          v-if="formState.menuType == 0 || formState.menuType == 1"
        >
          <a-input-number
            v-model:value="formState.sortNo"
            :readonly="isDetail"
          />
        </a-form-item>
        <a-form-item
          label="图标"
          name="sortNo"
          v-if="formState.menuType == 0 || formState.menuType == 1"
        >
          <Icon :model-value="formState.icon" @update="updateIcon"></Icon>
        </a-form-item>
        <a-form-item label="是否路由菜单" v-if="formState.menuType != 2">
          <a-switch v-model:checked="formState.route" :disabled="isDetail" />
        </a-form-item>
        <a-form-item label="是否隐藏路由" v-if="formState.menuType != 2">
          <a-switch
            v-model:checked="formState.hidden"
            checked-children="是"
            un-checked-children="否"
            :disabled="isDetail"
          />
        </a-form-item>
        <a-form-item label="是否缓存路由" v-if="formState.menuType != 2">
          <a-switch
            v-model:checked="formState.keepAlive"
            checked-children="是"
            un-checked-children="否"
            :disabled="isDetail"
          />
        </a-form-item>
        <a-form-item label="是否聚合路由" v-if="formState.menuType != 2">
          <a-switch
            v-model:checked="formState.alwaysShow"
            checked-children="是"
            un-checked-children="否"
            :disabled="isDetail"
          />
        </a-form-item>
        <a-form-item label="打开方式" v-if="formState.menuType != 2">
          <a-switch
            v-model:checked="formState.internalOrExternal"
            checked-children="外部"
            un-checked-children="内部"
            :disabled="isDetail"
          />
        </a-form-item>
        <a-form-item label="授权策略" v-if="formState.menuType == 2">
          <a-radio-group
            v-model:value="formState.permsType"
            :disabled="isDetail"
          >
            <a-radio value="1">可见/可访问(授权后可见/可访问)</a-radio>
            <a-radio value="2">可编辑(未授权时禁用)</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="状态" v-if="formState.menuType == 2">
          <a-radio-group v-model:value="formState.status" :disabled="isDetail">
            <a-radio value="1">有效</a-radio>
            <a-radio value="0">无效</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div style="display: flex; justify-content: end">
        <a-button style="margin-right: 5px" @click="close">关闭</a-button>
        <a-button
          type="primary"
          @click="submit"
          :loading="loading"
          :disabled="isDetail"
          >确定</a-button
        >
      </div>
    </a-card>
  </a-drawer>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { editPermissionTree, queryTreeList } from "@/api/system/index.js";
import Icon from "@/components/icon/index.vue";
import { message } from "ant-design-vue";
const props = defineProps({
  openE: {
    type: Boolean,
  },
  currentApp: {
    type: String,
    default: "",
  },
  item: {
    type: Object,
    default: {},
  },
  isDetail: {
    type: Boolean,
    default: false,
  },
});
const form = ref();
const loading = ref(false);
const treeData = ref([]);
const emit = defineEmits(["handleClose", "handleCloseDetail"]);
const isShow = computed(() => {
  return props.openE;
});
let formState = reactive({
  layout: "",
  menuType: "0",
  name: "",
  icon: "",
  resource: "",
  parentId: "",
  url: "",
  component: "",
  permsType: "1",
  perms: "",
  status: "1",
  route: true,
  sortNo: "",
  redirect: "",
  hidden: false,
  keepAlive: false,
  alwaysShow: false,
  internalOrExternal: false,
});
const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const afterOpenChange = () => {
  console.log(1);
};
const close = () => {
  form.value.resetFields();
  emit("handleClose");
};
/**
 * 获取树形数据
 * @returns {Promise<void>}
 */
const getTreeData = async () => {
  try {
    const res = await queryTreeList({ appCode: props.currentApp });
    console.log(res);
    treeData.value = [];
    let treeList = res.result.treeList;
    for (let a = 0; a < treeList.length; a++) {
      let temp = treeList[a];
      temp.isLeaf = temp.leaf;
      treeData.value.push(temp);
    }
  } catch (e) {
    message.error(e);
  }
};
/**
 * 提交表单
 */
const submit = () => {
  form.value.validate().then(async () => {
    try {
      loading.value = true;
      const data = { ...formState, appCode: props.currentApp };
      const res = await editPermissionTree(data);
      message.success("修改成功");
      emit("handleClose");
    } catch (e) {
      message.error(e);
    } finally {
      loading.value = false;
      form.value.resetFields();
    }
  });
};
/**
 * 更新图标
 * @param icon {string} 图标
 */
const updateIcon = (icon) => {
  formState.icon = icon;
};

onMounted(() => {
  console.log(props.isDetail);
  getTreeData();
  let obj = Object.assign({}, props.item);
  for (let objKey in obj) {
    formState[objKey] = obj[objKey];
  }
  formState.menuType += "";
});
</script>

<style scoped></style>
